<template>
    <view class="page">
        <view class="list-item" v-for="(item,index) in sortList" :key="index">
            <view class="sort-name" v-if="!sortEdi[index]">{{item.classify_name}}</view>
            <view class="sort-name" v-if="sortEdi[index]"><input type="text" v-model="sortList[index].classify_name" auto-focus/></view>
            <view class="sort-operation">
                <view class="operation-btn-edit" v-if="!sortEdi[index]" @click="onEdit(index)">
                    <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/edit-blue.png" />
                    <text>编辑</text>
                </view>
                <view class="operation-btn-edit" v-if="sortEdi[index]" @click="onSave(index)">
                    <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/edit-blue.png" />
                    <text>保存</text>
                </view>
                <view class="operation-btn-del" v-if="!sortEdi[index]" @click="delArticleClassify(index)">
                    <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/del-red.png" />
                    <text>删除</text>
                </view>
                <view class="operation-btn-del" v-if="sortEdi[index]" @click="onCancel(index)">
                    <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/del-red.png" />
                    <text>取消</text>
                </view>
            </view>
        </view>
        <view class="list-btn" @click="addSort">
            <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/add-blue.png" />
            <text>添加分类</text>
        </view>
    </view>
</template>

<script>
    export default {
        name: "circlebarSort",
        data(){
          return{
              circle_id:'',
              sortList:[],
              sortEdi:[],
              type: ''
          }
        },
        onLoad(query){
            this.circle_id = query.circle_id
        },
        onShow(){
          this.getEnableArticleClassify();
        },
        methods:{
            //获取圈子帖子分类
            async getEnableArticleClassify(){
                let params = {
                    circle_id: this.circle_id,
                    user_token: uni.getStorageSync('userToken'),
                }
                const res = await this.$api.getEnableArticleClassify(params);
                if (res.data.level == 'success'){
                    this.sortList = res.data.data;
                    for (let i=0;i<this.sortList.length;i++){
                        this.sortEdi[i] = false
                    }
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //启动编辑
            onEdit(id){
                let str = this.sortEdi;
                str[id] = true;
                for (let i=0;i<str.length;i++){
                    if (id != i){
                        str[i] = false
                    }
                }
                if (this.type == 'add'){
                    this.sortList.splice(this.sortList.length-1,1);
                    str.splice(str.length-1,1);
                }
                this.type = 'edit';
                this.sortEdi = [];
                this.sortEdi = str;
            },
            //删除分类
            async delArticleClassify(id){
                let params = {
                    circle_id: this.circle_id,
                    id: this.sortList[id].id,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.delArticleClassify(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title:res.data.message
                    })
                    this.getEnableArticleClassify();
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //提交新增分类
            async addArticleClassify(id){
                let params = {
                    circle_id: this.circle_id,
                    classify_name: this.sortList[id].classify_name,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.addArticleClassify(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title:res.data.message
                    })
                    this.getEnableArticleClassify();
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //提交修改分类
            async editArticleClassify(id){
                let params = {
                    id: this.sortList[id].id,
                    classify_name: this.sortList[id].classify_name,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.editArticleClassify(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title:res.data.message
                    })
                    this.getEnableArticleClassify();
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //添加分类
            addSort(){
                this.type = 'add';
                this.sortList.push({});
                for (let i=0;i<this.sortEdi.length;i++){
                    this.sortEdi[i] = false
                }
                this.sortEdi.push(true)
            },
            //保存添加/修改
            onSave(id){
                if (this.type == 'edit'){
                    this.editArticleClassify(id)
                } else {
                    this.addArticleClassify(id)
                }
            },
            //取消保存/添加
            onCancel(id){
                if (this.type == 'edit') {
                    let str = this.sortEdi;
                    str[id] = false;
                    this.sortEdi = [];
                    this.sortEdi = str;
                }else {
                    this.sortList.splice(id,1);
                    this.sortEdi.splice(id,1);
                }

            }
        }
    }
</script>

<style scoped lang="scss">
    .list-item{
        width: 100vw;
        height: 150rpx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1rpx solid #E6E6E6;
        .sort-name{
            max-width: calc(100vw - 404rpx);
            padding: 0 30rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: #000000;
            input{
                display: inline-block;
            }
        }
        .sort-operation{
            margin-left: auto;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 0 30rpx;
            .operation-btn-edit{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                margin-right: 50rpx;
                text{
                    color:#078BFF;
                    font-weight: 28rpx;
                    /*overflow: visible;*/
                }
                img{
                    width: 32rpx;
                    height: 32rpx;
                    /*overflow: visible;*/
                }
            }
            .operation-btn-del{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                text{
                    color:#F45550;
                    font-weight: 28rpx;
                }
                img{
                    width: 32rpx;
                    height: 32rpx;
                    margin: 0 6rpx;
                }
            }
        }
    }
    .list-btn{
        width: 100vw;
        height: 150rpx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1rpx solid #E6E6E6;
        img{
            width: 28rpx;
            height: 28rpx;
            margin: 0 30rpx;
        }
        text{
            color: #3279FF;
            font-size: 32rpx;
        }
    }
</style>